import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import "antd/dist/antd.css";
import "@formily/antd/dist/antd.css";
import "./index.css";

import PageLoading from "./components/PageLoading";

function loadableComp(LazyComponent: any) {
  return (): JSX.Element => (
    <React.Suspense fallback={<PageLoading />}>
      <LazyComponent />
    </React.Suspense>
  );
}

const AppLayout = loadableComp(
  React.lazy(
    () => import(/* webpackChunkName: "home" */ "./components/AppLayout/index")
  )
);

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<AppLayout />}>
        <Route index element={<div>Entity</div>} />
        <Route path="entity" element={<div>Entity</div>} />
        <Route path="storage" element={<div>Storage</div>} />
        <Route path="entity/:entityName" element={<div>EntityForm</div>} />
        <Route path="storage/:storageUri" element={<div>StorageForm</div>} />
      </Route>

      {/* <Route path="*" element={NoMatch} /> */}
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);
